<template>
  <div class="details-head">
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in housePics" :key="image">
            <img :src="image.url" />
        </van-swipe-item>
        <template #indicator="{ active }" >
          <div class="custom-indicator">
            <!-- 一开始active是Nan -->
            <span v-for="(item,key) of obj" :key="key" class="all" :class="{current: getcurrentTitle(housePics[active]?.title) === key}">
              {{ key }} {{ getIndex(active,key) }} / {{ item.length }} 
            </span>
          </div>
        </template>
    </van-swipe>

  </div>
</template>

<script setup>

const props = defineProps({
  housePics:{
    type:Array,
    default:() =>([])
  }
})

const obj = {}
const nameReg = /【(.*?)】/i
for (let item of props.housePics){
  const newtitle = nameReg.exec(item.title)[1]
  if (!obj[newtitle]){
    obj[newtitle] = []
  }
  obj[newtitle].push(item.orderIndex)
}


function getIndex(active,key){
  return obj[key].findIndex(item => item == props.housePics[active]?.orderIndex) +1
}

function getcurrentTitle(str){
  if (!str) return ""
  return nameReg.exec(str)[1]
}

</script>

<style lang="less" scoped>
  .details-head {
    font-size: 8px;
      img {
        height: 50vh;
        width: 100%;
      }
      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        background: rgba(0, 0, 0, 0.1);

        .current {
          background-color: #fff;
        }
        .all {
          padding: 3px;
        }
      }
  }
</style>